<template>
  <div :id="id" style="width: 100%;height: 18.75rem;margin-top: 0.625rem"></div>
</template>

<script>
    export default {
      props: ['title', 'datax', 'datay', 'id'],
      watch: {
        title: {
          handler(newVal, oldVal) {
            if (newVal) {
              this.getEchartsData()
            }
          },
          deep: true
        }
      },
      methods:{
        // 折线图数据渲染
        getEchartsData() {
          let myChart = this.$echarts.init(document.getElementById(this.id))
          var option = {
              title: { text: this.title },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: this.datax
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data: this.datay,
                  type: 'line',
                  areaStyle: {}
              }]
          };
          myChart.setOption(option);

        }
      },
      mounted() {
        this.getEchartsData()
      }
    }
</script>

<style>
</style>
